<template>
	<div class="container">
		<div class="banner">
			      <a-carousel autoplay>
        <div><img src="../assets/images/index/bg.jpg" alt="" /></div>
        <div>
          <img src="../assets/images/index/bg.jpg" alt="" />
        </div>
        <div><img src="../assets/images/index/bg.jpg" alt="" /></div>
      </a-carousel>
		</div>
		<div class="content">
			<div class="entrance">
				<div class="item" @tap="takein">
					<img src="../assets/images/index/zq.png" class="icon">
					<div class="title">自取</div>
				</div>
				<div class="item" @tap="takeout">
					<img src="../assets/images/index/wm.png" class="icon">
					<div class="title">外卖</div>
				</div>
			</div>
			<div class="info">
				<div class="integral_section" @tap="integrals">
					<div class="top">
						<text class="title">我的积分</text>
						<text class="value">411</text>
					</div>
					<div class="bottom">
						进入积分商城兑换柯基券及周边好礼
						<div class="iconfont iconarrow-right"></div>
					</div>
				</div>
				<div class="qrcode_section" @tap="memberCode">
					<img src="../assets/images/index/qrcode.png">
					<text>会员码</text>
				</div>
			</div>
			<div class="navigators">
				<div class="left">
					<div class="title">
						<img src="../assets/images/index/csc.png"  class="mark-img">
						<text>柯基的茶商城</text>
					</div>
					<div class="subtitle">
						<span>精品礼盒、网红零食</span>
					</div>
					<div class="bottom">
						<img src="../assets/images/balance.png">
					</div>
				</div>
				<div class="right">
					<div class="top" @tap="invite">
						<img src="../assets/images/index/mcsb.png"  class="mark-img">
						<text>买茶送包</text>
						<img src="../assets/images/index/mcsb_bg.png"  class="back-img">
					</div>
					<div class="bottom" @tap="packages">
						<img src="../assets/images/index/hyjb.png"  class="mark-img">
						<text>会员券包</text>
						<img src="../assets/images/index/hyjb_bg.png"  class="back-img">
					</div>
				</div>
			</div>
			<div class="member-news">
				<div class="header">
					<div class="title">会员新鲜事</div>
					<div class="iconfont iconRightbutton"></div>
				</div>
				<div class="list">
					<div class="item">
						<img src="../assets/images/index/banner1.jpg" >
						<div class="title">"梅"你不行 | 霸气杨梅清爽回归</div>
					</div>
					<div class="item">
						<img src="../assets/images/index/bg.jpg">
						<div class="title">五周年庆 | 大礼等你来拿</div>
					</div>
					<div class="item">
						<img src="../assets/images/index/bg.jpg">
						<div class="title">五周年庆 | 大礼等你来拿</div>
					</div>
					<div class="item">
						<img src="../assets/images/index/bg.jpg" >
						<div class="title">五周年庆 | 大礼等你来拿</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

</script>

<style lang="scss" scoped>


	.container {
		
		width:100%;
		min-height:100%;
		padding-bottom: 100px;
		 background: $background;
		.banner {

			position: relative;
			width: 100%;
			height: 230px;
			 // 轮播图
  .ant-carousel /deep/ .slick-slide {
    text-align: center;
    height: 230px;
    overflow: hidden;
  }

			.bg {
				width: 100%;
				height: 230px;
			}

			.intro {
				position: absolute;
				top: calc(20px + var(--status-bar-height)); //导航栏高度+50rpx
				left: 20px;
				color: #FFFFFF;
				display: flex;
				flex-direction: column;

				.greet {
					font-size: $font-size-lg;
					margin-bottom: 10px;
				}

				.note {
					font-size: $font-size-sm;
				}
			}
		}

		.content {
			padding: 0 30px;

			.entrance {
				position: relative;
				margin-top: 1rem;
				margin-bottom:1rem;
				border-radius: 10px;
				background-color: #fff;
				box-shadow: $box-shadow;
				padding: 30px 0;
				display: flex;
				align-items: center;
				justify-content: center;

				.item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: relative;

					.icon {
						width: 50px;
						height: 50px;
						margin: 20px;
					}

					.title {
						font-size: 1.5rem;
						color: $text-color-base;
						font-weight: 600;
					}

					&:nth-child(1)::after {
						//竖线
						content: '';
						position: absolute;
						width: 1px;
						background-color: #ddd;
						right: 0;
						height: 100%;
						transform: scaleX(0.5) scaleY(0.8);
					}
				}
			}

			.info {
				position: relative;
				margin-bottom: 1rem;
				border-radius: 10px;
				background-color: #ffffff;
				box-shadow: $box-shadow;
				padding: 30px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.integral_section {
					//flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.top {
						display: flex;
						align-items: center;

						.title {
							color: $text-color-base;
							font-size: $font-size-base;
							margin-right: 10px;
						}

						.value {
							font-size: 44px;
							font-weight: bold;
						}
					}

					.bottom {
						font-size: $font-size-sm;
						color: $text-color-assist;
						display: flex;
						align-items: center;
					}
				}

				.qrcode_section {
					color: $color-primary;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: $font-size-sm;

					img {
						width: 30px;
						height: 30px;
						margin-bottom: 10px;
					}
				}
			}

			.navigators {
				// margin-bottom: 20px;
				border-radius: 10px;
				background-color: #ffffff;
				box-shadow: $box-shadow;
				padding: 10px;
				display: flex;

				// align-items: stretch;
				//里面的图标大小
				.mark-img {
					width: 30px;
					height: 30px;
					margin-right: 10px;
				}

				//右下角背景图大小
				.back-img {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 27px * 2;
					height: 32px * 2;
				}

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-right: 20px;
					padding: 20px 0 0 20px;
					background-color: #F2F2E6;

					.title {
						display: flex;
						align-items: center;
						padding: 10px 0 5px 0;
						font-size: $font-size-sm;
						color: $text-color-base;

					}

					.subtitle {
						padding-bottom: 10px;
						font-size: $font-size-sm ;
						color: $text-color-assist;
						padding-left: 40px;
					}

					.bottom {
						display: flex;
						flex-direction: row-reverse;
						padding: 30px 20px 10px 0;

					
					}

				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					font-size: $font-size-sm;
					color: $text-color-base;

					.top {
						position: relative;
						display: flex;
						flex: 1;
						align-items: center;
						padding-left: 20px;
						margin-bottom: 20px;
						background-color: #FDF3F2;
					}

					.bottom {
						position: relative;
						display: flex;
						flex: 1;
						align-items: center;
						padding-left: 20px;
						background-color: #FCF6D4;
					}
				}
			}

			.member-news {
				width: 100%;
				// padding-bottom: 80rpx;

				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20px 0;

					.title {
						font-size: $font-size-lg;
						font-weight: bold;
					}

					.iconfont {
						font-size: 52px;
						color: $text-color-assist;
					}
				}

				.list {
					width: 100%;
					display: flex;
					flex-direction: column;

					.item {
						width: 100%;
						height: 100px;
						margin-bottom: 30px;
						position: relative;
						overflow: hidden;

						img {
							
							width: 100%;
							height: 100%;
							object-fit:cover;
							border-radius: 8px;
						}

						.title {
							position: absolute;
							font-size: 1rem;
							font-weight: 500;
							width: 100%;
							bottom: 20px;
							left: 20px;
							color: #ffffff;
						}
					}
				}
			}
		}
    img {
  width: 100%;
  background-repeat: no-repeat;
}
	}
</style>
